<template>
	<view>
		<view class="Wrapper">
			<view class="row j-end a-center">
				<view class="d-flex">
					<view class="Btn">消费商城</view>
				</view>
			</view>
			<view class="foundation">
				<text class="size28 white">消费积分</text>
				<text class="size46 white">{{ accountInfo.jifen_yue }}</text>
			</view>
		</view>

		<view class="list" v-for="(item, index) in pageData" :key="index">
			<view class="d-flex f-column">
				<text class="black size30 bold500">{{ item.remarks }}</text>
				<text class="color_33 size26 m-top10">{{ item.add_date }}</text>
			</view>
			<text class="add">{{ item.number_text }}</text>
		</view>
		<!-- <view class="list">
			<view class="d-flex f-column">
				<text class="black size30 bold500">云票购买</text>
				<text class="color_33 size26 m-top10">2024-11-13 01:00:00</text>
			</view>
			<text class="privce">- 600</text>
		</view> -->
		<view class="p-top100 p-bot100" v-if="!pageData.length">
			<u-empty mode="list" text="暂无相关内容"></u-empty>
		</view>

		<buyTicket v-if="show" @Shut="show = false"></buyTicket>
	</view>
</template>

<script>
import Api from '@/common/Api.js';
export default {
	data() {
		return {
			show: false,
			accountInfo: '',
			page: 1,
			limit: 10,
			getMore: true,
			pageData: []
		};
	},
	onLoad() {
		this.getAccountLog();
	},
	methods: {
		async getAccountLog() {
			const Item = await Api.getAccountLog(2, this.page);
			this.accountInfo = Item.accountInfo;
			const result = Item.data || [];
			this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
			if (result.length < this.limit) this.getMore = false;
		}
	},
	onReachBottom() {
		if (!this.getMore) return;
		this.page++;
		this.getAccountLog();
	}
};
</script>

<style>
page {
	background-color: #f2f2f2;
	padding-bottom: 24rpx;
}
</style>
<style lang="scss" scoped>
.list {
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.privce {
		font-size: 48rpx;
		font-weight: 500;
		color: #009933;
	}
	.add {
		font-size: 48rpx;
		font-weight: 500;
		color: #ff0000;
	}
}
.Wrapper {
	width: 100%;
	padding: 24rpx 40rpx 30rpx 40rpx;
	background-color: #000066;
	color: #fff;

	.Btn {
		color: #fff;
		font-size: 28rpx;
		padding: 0 20rpx;
		position: relative;
	}
	.btnLine:before {
		content: '';
		width: 1px;
		height: 20rpx;
		background-color: #fff;
		position: absolute;
		right: 0;
		top: 10rpx;
	}
	.foundation {
		display: flex;
		flex-direction: column;
	}
	.infoTxt {
		color: #fff;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
}
</style>
